<app-breadcrumbs [items]="breadcrumbs">
    <div page-help>
        <p>This page allows changing user's password.</p>
        <p>
            Specify the current password and then create a new one. The new password must be at least 8 characters long.
        </p>
    </div>
</app-breadcrumbs>

<div class="grid mt-2 max-w-100rem">
    <div class="col-fixed ml-2" style="width: 200px">
        <app-settings-menu></app-settings-menu>
    </div>
    <p-message
        severity="error"
        text="You have authenticated by the external authentication service. You cannot change the password; you should use a change password form provided by your authentication service."
        *ngIf="isExternalUser"
    >
    </p-message>
    <div class="col ml-2">
        <form [formGroup]="passwordChangeForm">
            <p-panel header="New password setting">
                <div class="grid">
                    <div class="col-12">
                        <p>Current password</p>
                        <p-password
                            [feedback]="false"
                            inputId="old-password"
                            formControlName="oldPassword"
                            inputStyleClass="password-input"
                            styleClass="password-component"
                            title="Currently used password."
                            [toggleMask]="true"
                        ></p-password>
                    </div>
                    <div *ngIf="isFeedbackNeeded('oldPassword')" class="col-12">
                        <p-message severity="error" [text]="buildFeedbackMessage('oldPassword')"></p-message>
                    </div>
                    <div class="col-12">
                        <p>New password</p>
                        <p-password
                            inputId="new-password"
                            formControlName="newPassword"
                            [pattern]="passwordPattern"
                            inputStyleClass="password-input"
                            styleClass="password-component"
                            title="Must only contain letters, digits, or special characters and must be at least 8 characters long."
                            [toggleMask]="true"
                        ></p-password>
                    </div>
                    <div *ngIf="isFeedbackNeeded('newPassword')" class="col-12">
                        <p-message
                            severity="error"
                            [text]="
                                buildFeedbackMessage(
                                    'newPassword',
                                    'Password must only contain letters, digits, and special characters.'
                                )
                            "
                        ></p-message>
                    </div>
                    <div class="col-12">
                        <p>Confirm password</p>
                        <p-password
                            inputId="confirm-password"
                            formControlName="confirmPassword"
                            inputStyleClass="password-input"
                            styleClass="password-component"
                            title="Must only contain letters, digits, or special characters and must be at least 8 characters long."
                            [feedback]="false"
                            [toggleMask]="true"
                        ></p-password>
                    </div>
                    <div *ngIf="isFeedbackNeeded('confirmPassword', true)" class="col-12">
                        <p-message
                            severity="error"
                            [text]="
                                buildFeedbackMessage(
                                    'confirmPassword',
                                    'Password must only contain letters, digits, or special characters.',
                                    true
                                )
                            "
                        ></p-message>
                    </div>
                    <div class="col-12">
                        <button
                            pButton
                            type="submit"
                            label="Save"
                            id="save-new-password-button"
                            icon="pi pi-pencil"
                            [disabled]="passwordChangeForm.invalid || isExternalUser"
                            (click)="passwordChangeFormSubmit()"
                        ></button>
                    </div>
                </div>
            </p-panel>
        </form>
    </div>
</div>
